﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>商家首页</title>
    <link rel="stylesheet" href="../Script/common/vant.min.css" />
    <script src="../Script/common/vue.js"></script>
    <script src="../Script/common/vant.min.js"></script>
    <script src="../Script/common/axios.min.js"></script>
    <script src="../Script/common/Session.js"></script>
    <script src="../Script/common/Tools.js"></script>
    <script src="../Script/common/Validate.js"></script>
    <script src="../Script/common/Page.js"></script>
    <script src="../Script/common/Http.js"></script>
    <meta name="author" content="" />
    <link rel="stylesheet" href="../Script/common/diygw-ui/index.css" />

    <script type="text/javascript" src="../Script/common/moment.js"></script>
    <script type="text/javascript" src="../Script/common/echarts.js"></script>

    <script src="../Script/jquery-1.8.3.min.js"></script>

    <style>
        .flex5-clz {
            z-index: 1000;
            background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
            background-position: center center;
            height: 180px;
        }

        .avatar-clz {
            margin-left: 5px;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-right: 5px;
        }

        .avatar-badge-0 {
            right: -3px;
        }

        .tabs-clz {
            border-bottom-left-radius: 1px;
            overflow: hidden;
            flex: 1;
            border-top-left-radius: 1px;
            border-top-right-radius: 1px;
            border-bottom-right-radius: 1px;
        }

        .tabs-title {
            background-color: #05051b !important;
        }

        .flex-clz {
            padding-top: 5px;
            border-bottom-left-radius: 6px;
            z-index: 1000;
            padding-left: 5px;
            padding-bottom: 5px;
            border-top-right-radius: 6px;
            margin-right: 5px;
            margin-left: 5px;
            box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.16);
            overflow: hidden;
            width: calc(100% - 5px - 5px) !important;
            border-top-left-radius: 6px;
            margin-top: 5px;
            border-bottom-right-radius: 6px;
            margin-bottom: 5px;
            padding-right: 5px;
        }

        .flex1-clz {
            z-index: 1000;
            border-right: 1px solid #eee;
        }

        .flex2-clz {
            z-index: 1000;
            border-right: 1px solid #eee;
        }

        .flex3-clz {
            z-index: 1000;
        }

        .flex8-clz {
            padding-top: 5px;
            border-bottom-left-radius: 6px;
            z-index: 1000;
            padding-left: 5px;
            padding-bottom: 5px;
            border-top-right-radius: 6px;
            margin-right: 5px;
            margin-left: 5px;
            box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.16);
            overflow: hidden;
            width: calc(100% - 5px - 5px) !important;
            border-top-left-radius: 6px;
            margin-top: 5px;
            border-bottom-right-radius: 6px;
            margin-bottom: 5px;
            padding-right: 5px;
        }

        .flex10-clz {
            z-index: 1000;
            border-right: 1px solid #eee;
        }

        .flex12-clz {
            z-index: 1000;
            border-right: 1px solid #eee;
        }

        .flex16-clz {
            z-index: 1000;
        }

        .container {
            padding-left: 0px;
            padding-right: 0px;
            font-size: 12px;
        }

        .container {
            padding-bottom: 80px;
        }
    </style>

</head>
<body>
    <div id="app">
        <div class="container">
            <div class="flex diygw-col-24 diygw-bottom">
                <div class="diygw-grid diygw-actions">
                    <button @click="navigateTo" data-type="href" data-url="index.html" class="diygw-action addon">
                        <div class="diygw-grid-inner solid-right">
                            <div class="diygw-grid-icon diygw-avatar">
                                <img mode="aspectFit" class="diygw-avatar-img" src="../Script/static/icon8_sy.png" />
                            </div>
                            <div class="diygw-grid-title">主页汇总</div>
                        </div>
                    </button>
                    <button @click="navigateTo" data-type="href" data-url="canteen.html" class="diygw-action">
                        <div class="diygw-grid-inner solid-right">
                            <div class="diygw-grid-icon diygw-avatar">
                                <img mode="aspectFit" class="diygw-avatar-img" src="../Script/static/icon8_dp.png" />
                            </div>
                            <div class="diygw-grid-title">食堂汇总</div>
                        </div>
                    </button>
                    <button class="diygw-action" @click="navigateTo" data-type="href" data-url="dangkou.html">
                        <div class="diygw-grid-inner solid-right">
                            <div class="diygw-grid-icon diygw-avatar">
                                <img mode="aspectFit" class="diygw-avatar-img" src="../Script/static/icon11_jglb.png" />
                            </div>
                            <div class="diygw-grid-title">档口汇总</div>
                        </div>
                    </button>
                    <!--<button class="diygw-action">
                        <div class="diygw-grid-inner solid-right">
                            <div class="diygw-grid-icon diygw-avatar">
                                <img mode="aspectFit" class="diygw-avatar-img" src="../Script/static/icon11_mhgl.png" />
                            </div>
                            <div class="diygw-grid-title">机号汇总</div>
                        </div>
                    </button>
                    <button class="diygw-action">
                        <div class="diygw-grid-inner solid-right">
                            <div class="diygw-grid-icon diygw-avatar">
                                <img mode="aspectFit" class="diygw-avatar-img" src="../Script/static/icon9_bmgk.png" />
                            </div>
                            <div class="diygw-grid-title">部门汇总</div>
                        </div>
                    </button>-->
                </div>
            </div>
            <div class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex5-clz">
                <div class="flex diygw-col-0 avatar-clz">
                    <div class="diygw-avatar lg white radius">
                        <img mode="aspectFit" class="diygw-avatar-img radius" src="../Script/static/tx-nxs4.png" />
                        <div class="diygw-tag badge avatar-badge-0 diy-icon-male gradual-red"></div>
                    </div>
                </div>
                <div id="username" class="diygw-col-0 diygw-text-md text-white"></div>
            </div>
            <div class="flex diygw-col-24 flex-direction-column tabs-clz">
                <scroll-view scroll-x :scroll-into-view="'scroll-' + tabsIndex" :scroll-left="tabsLeft" scroll-with-animation class="diygw-tabs text-center justify-start blue small-border tabs-title">
                    <div :id="'scroll-' + index" class="diygw-tab-item" :class="index==tabsIndex?' cur':''" v-for="(item,index) in  tabsDatas" :key="index" @click="changeTabs" :data-index="index"><span v-if="item.icon" :class="item.icon"></span> {{item.text}}</div>
                </scroll-view>
            </div>
            <div style="display:none;" class="flex flex-wrap diygw-col-24 justify-between items-center flex4-clz">
                <div class="flex flex-wrap diygw-col-20 flex-direction-column items-center flex6-clz">
                    <div class="diygw-form-item diygw-col-24">
                        <div class="title">日期</div>
                        <div class="flex input" @click.stop="showDate1=true">
                            <input class="flex1" readonly placeholder="请选择" v-model="date1" />
                            <i class="iconfont icon-right"></i>
                        </div>
                        <van-calendar v-model:show="showDate1" teleport="body" :min-date="minDate" :max-date="maxDate" @confirm="changeDate1" />
                    </div>
                </div>
                <div class="flex flex-wrap diygw-col-4 flex-direction-column items-center flex7-clz">
                    <div class="flex diygw-col-24">
                        <button id="checkquery" class="diygw-btn black radius-xs margin-xs button-button-clz">查询</button>
                    </div>
                </div>
            </div>
            <div class="flex diygw-col-24">
                <div class="diygw-pzx" style="border-bottom: 1px solid #eee"></div>
            </div>

            <div class="flex flex-wrap diygw-col-24 justify-between items-center flex8-clz">
                <div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex10-clz">
                    <div class="diygw-col-0 diygw-text-lg text-yellow">消费营业</div>
                    <div class="diygw-col-0 diygw-text-md text-yellow"></div>
                </div>
                <div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex12-clz">
                    <div id="yyxfze" class="diygw-col-0 diygw-text-lg text-yellow"></div>
                    <div class="diygw-col-0 diygw-text-md text-yellow">消费总额</div>
                </div>
                <div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex16-clz">
                    <div id="yyxfzc" class="diygw-col-0 diygw-text-lg text-yellow"></div>
                    <div class="diygw-col-0 diygw-text-md text-yellow">消费次数</div>
                </div>
            </div>

            <div class="flex flex-wrap diygw-col-24 justify-between items-center flex-clz">
                <div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex1-clz">
                    <div class="diygw-col-0 diygw-text-lg text-green">充值营业</div>
                    <div class="diygw-col-0 diygw-text-md text-green"></div>
                </div>
                <div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex2-clz">
                    <div id="yyczze" class="diygw-col-0 diygw-text-lg text-green"></div>
                    <div class="diygw-col-0 diygw-text-md text-green">充值总额</div>
                </div>
                <div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex3-clz">
                    <div id="yyczzc" class="diygw-col-0 diygw-text-lg text-green"></div>
                    <div class="diygw-col-0 diygw-text-md text-green">充值次数</div>
                </div>
            </div>
            <div class="clearfix" style="height: 300px">
                <div id="container" style="height: 100%"></div>
            </div>
            <br />
            <br />
            <div class="clearfix" style=" height: 380px">
                <div id="columnar" style="height: 100%"></div>
            </div>
        </div>
    </div>



    <script type="text/javascript">
        setTimeout(function () {


            //饼状图
            var dom1 = document.getElementById('container');
            var myChart1 = echarts.init(dom1, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var app = {};

            var option1;


            option1 = {
                title: {
                    text: '',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: 'left'
                },
                series: [
                    {

                        name: '饼状图',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 580, name: '充值总额' },
                            { value: 484, name: '充值总数' },
                            { value: 1048, name: '消费总额' },
                            { value: 735, name: '消费总数' },

                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };








            //柱形图
            var dom2 = document.getElementById('columnar');
            var myChart2 = echarts.init(dom2, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var app = {};

            var option2;

            option2 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: false }
                    }
                },
                legend: {
                    data: ['充值', '消费']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['上月', '本月', '上周', '本周', '昨天', '今天'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '柱状图',
                        axisLabel: {
                            formatter: '{value} 元',
                            position: "right",
                            show: false,

                        }
                    }
                ],
                series: [
                    {
                        name: '充值',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 元';
                            }
                        },
                        data: [
                            0, 0, 0, 0, 0, 0
                        ]
                    },
                    {
                        name: '消费',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 元';
                            }
                        },
                        data: [
                            0, 0, 0, 0, 0, 0
                        ]
                    }
                ]
            };





            dataInfo(option1, myChart1, option2, myChart2);



            $("#scroll-0").click(function () {
                dataInfo(option1, myChart1, option2, myChart2);
            });
            $("#scroll-1").click(function () {
                dataInfo(option1, myChart1, option2, myChart2);
            });
            $("#scroll-2").click(function () {
                dataInfo(option1, myChart1, option2, myChart2);
            });
            $("#scroll-3").click(function () {
                dataInfo(option1, myChart1, option2, myChart2);
            });
            $("#scroll-4").click(function () {
                dataInfo(option1, myChart1, option2, myChart2);
            });
            $("#scroll-5").click(function () {
                dataInfo(option1, myChart1, option2, myChart2);
            });


            $("#checkquery").click(function () {
                dataInfo(option1, myChart1, option2, myChart2);
            })






        }, 1000);

        function dataInfo(option1, myChart1, option2, myChart2) {
            $.post("../Ajax/InvalidSession.ashx", {}, function (res) {
                if (res.data == "0") {
                    window.location.href = "../Binding.aspx";
                }
            })
            $.post("../Ajax/MerchantManagement.ashx", { merType: "merhome", date1: $(".flex1").val() }, function (res) {
                var res = JSON.parse(res);
                console.log(res)
                if (res == "-1") { window.location.href = "../Binding.aspx"; }
                if (res != "") {
                    //饼状图加载数据
                    var merdata1 = JSON.parse(res.merdata1)[0];
                    var merdata2 = JSON.parse(res.merdata2)[0];
                    var merdata5 = JSON.parse(res.merdata5)[0];
                    //显示当前登录管理用户
                    $("#username").text(merdata5.username);


                    //营业加载数据
                    $("#yyczze").text(merdata1.czze);
                    $("#yyczzc").text(merdata1.czzc);
                    $("#yyxfze").text(merdata2.xfze);
                    $("#yyxfzc").text(merdata2.xfzc);


                    //饼状图加载数据
                    option1.series[0].data[0].value = merdata1.czze;//充值总额
                    option1.series[0].data[1].value = merdata1.czzc;//充值总次数
                    option1.series[0].data[2].value = merdata2.xfze;//消费总额
                    option1.series[0].data[3].value = merdata2.xfzc;//消费总次数

                    if (option1 && typeof option1 === 'object') {
                        myChart1.setOption(option1);
                        window.addEventListener('resize', myChart1.resize);
                    }


                    //柱形图加载数据
                    var merdata3 = JSON.parse(res.merdata3)
                    //充值
                    option2.series[0].data[0] = merdata3[0].czze
                    option2.series[0].data[1] = merdata3[1].czze
                    option2.series[0].data[2] = merdata3[2].czze
                    option2.series[0].data[3] = merdata3[3].czze
                    option2.series[0].data[4] = merdata3[4].czze
                    option2.series[0].data[5] = merdata3[5].czze
                    var merdata4 = JSON.parse(res.merdata4)
                    //消费
                    option2.series[1].data[0] = merdata4[0].xfze
                    option2.series[1].data[1] = merdata4[1].xfze
                    option2.series[1].data[2] = merdata4[2].xfze
                    option2.series[1].data[3] = merdata4[3].xfze
                    option2.series[1].data[4] = merdata4[4].xfze
                    option2.series[1].data[5] = merdata4[5].xfze
                    if (option2 && typeof option2 === 'object') {
                        myChart2.setOption(option2);
                        window.addEventListener('resize', myChart2.resize);
                    }
                }

            });
        }


    </script>


    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    tabsDatas: [
                        { text: `今天`, icon: `` },
                        { text: `昨天`, icon: `` },
                        { text: `本周`, icon: `` },
                        { text: `上周`, icon: `` },
                        { text: `本月`, icon: `` },
                        { text: `上月`, icon: `` }
                    ],
                    tabsLeft: 0,
                    tabsIndex: 0,//日期选择分类
                    showDate1: false,
                    date1: '',//日期
                    minDate: new Date(2022, 0, 1),

                };
            },
            created() {
                this.init();
            },
            methods: {
                async init() {
                    //今天默认日期
                    this.date1 = moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD") + "至" + moment(moment().valueOf()).format("YYYY-MM-DD");


                },
                changeTabs(evt) {
                    let { index } = evt.currentTarget.dataset;
                    if (index == this.tabsIndex) return;
                    this.setData({
                        tabsLeft: (index - 1) * 60,
                        tabsIndex: index
                    });
                    //今天
                    if (this.tabsIndex == 0) {
                        this.date1 = moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD") + "至" + moment(moment().valueOf()).format("YYYY-MM-DD");
                    }
                    //昨天
                    if (this.tabsIndex == 1) {
                        this.date1 = moment(moment().add(-1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD") + "至" + moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD');
                    }
                    //本周
                    if (this.tabsIndex == 2) {
                        this.date1 = moment(moment().week(moment().week()).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD') + "至" + moment(moment().week(moment().week()).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD');
                    }
                    //上周
                    if (this.tabsIndex == 3) {
                        this.date1 = moment(moment().week(moment().week() - 1).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD') + "至" + moment(moment().week(moment().week() - 1).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD');
                    }
                    //本月
                    if (this.tabsIndex == 4) {
                        this.date1 = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD') + "至" + moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD');
                    }
                    //上月
                    if (this.tabsIndex == 5) {
                        this.date1 = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD') + "至" + moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD');
                    }

                },
                changeDate1(evt) {
                    //获取日期
                    this.date1 = `${evt.getFullYear()}-${evt.getMonth() < 10 ? '0' : ''}${evt.getMonth() + 1}-${evt.getDate() < 10 ? '0' : ''}${evt.getDate()}` + "至" + `${evt.getFullYear()}-${evt.getMonth() < 10 ? '0' : ''}${evt.getMonth() + 1}-${evt.getDate() < 10 ? '0' : ''}${evt.getDate()}`;
                    this.showDate1 = false;

                },
            }
        });
        app.use(vant);
        app.config.globalProperties.$tools = new Tools();
        app.config.globalProperties.$http = httpService;
        app.config.globalProperties.$session = Session;
        app.mixin({
            methods: {
                Validate,
                setData,
                navigateTo,
                showModal,
                showToast,
                uploadImage
            }
        });
        app.mount('#app');</script>



</body>


</html>
